<template>
  <div class="container">
    <el-row>
      <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:0}">
        <p class="title">已完成表单</p>
      </el-col>
      <el-col :xs="{span:24,offset:0}" :sm="{span:6,offset:2}">
        <div class="search-box">
          <el-input placeholder="请输入学号" prefix-icon="el-icon-search" v-model="input_box"></el-input>
          <el-button type="primary" @click="searchStuid">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 报修列表 -->
    <el-row>
      <el-col :xs="{span:24,offset:0}" :sm="{span:24,offset:0}">
        <div class="box">
          <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="headClass"
            :cell-style="tableClass"
            style="width: 100%"
            @expand-change="openExpand"
          >
            <el-table-column type="expand" label="展开详情" fixed="left" width="50">
              <div slot-scope="props">
                <p
                  v-if="props.row.time!==undefined&&props.row.time!=='NULL'&&props.row.time!==null&&props.row.time!==''"
                >
                  <span>报修时间：</span>
                  {{ props.row.time | dateFormat }}
                </p>
                <p
                  v-if="props.row.network!==undefined&&props.row.network!=='NULL'&&props.row.network!==null&&props.row.network!==''"
                >
                  <span>网络环境：</span>
                  {{ props.row.network }}
                </p>
                <p
                  v-if="props.row.port!==undefined&&props.row.port!=='NULL'&&props.row.port!==null&&props.row.port!==''"
                >
                  <span>端口状态：</span>
                  {{ props.row.port }}
                </p>
                <p
                  v-if="props.row.young!==undefined&&props.row.young!=='NULL'&&props.row.young!==null&&props.row.young!==''"
                >
                  <span>WiFi状态：</span>
                  {{ props.row.young }}
                </p>
                <p
                  v-if="props.row.test!==undefined&&props.row.test!=='NULL'&&props.row.test!==null&&props.row.test!==''"
                >
                  <span>测试结果：</span>
                  {{ props.row.test }}
                </p>
                <p
                  v-if="props.row.errcode!==undefined&&props.row.errcode!=='NULL'&&props.row.errcode!==null&&props.row.errcode!==''"
                  style="text-indent:1em"
                >
                  <span>错误码：</span>
                  {{ props.row.errcode }}
                </p>
                <p
                  v-if="props.row.portnum!==undefined&&props.row.portnum!=='NULL'&&props.row.portnum!==null&&props.row.portnum!==''"
                  style="text-indent:1em"
                >
                  <span>端口号：</span>
                  {{ props.row.portnum }}
                </p>
                <p
                  v-if="props.row.descrip!==undefined&&props.row.descrip!=='NULL'&&props.row.descrip!==null&&props.row.descrip!==''"
                >
                  <span>错误描述：</span>
                  {{ props.row.descrip }}
                </p>
                <p style="text-indent:1em">
                  <span>维修人：</span>
                  {{ props.row.fixerList }}
                </p>
                <p>
                  <span>维修时长：</span>
                  {{ props.row.fixerHours}}
                </p>
                <p>
                  <span>维修人数：</span>
                  {{ props.row.fixerNumber }}
                </p>
              </div>
            </el-table-column>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="stuId" label="学号" min-width="150"></el-table-column>
            <el-table-column prop="name" label="报修人" min-width="120"></el-table-column>
            <el-table-column prop="phone" label="联系电话" min-width="150"></el-table-column>
            <el-table-column prop="place" label="地点" min-width="120"></el-table-column>
            <el-table-column :formatter="dateFormat" prop="time" label="报修时间" min-width="120"></el-table-column>

            <el-table-column label="状态" width="90">
              <span class="okSpan">已完成</span>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!--分页组件-->
    <el-row class="page">
      <el-col :xs="{span:24,offset:0}" :sm="{span:18,offset:6}">
        <el-pagination
          small
          background
          layout="prev ,pager,next"
          :total="pagesizeCount"
          :pager-count="5"
          :page-size="pagesize"
          :current-page.sync="currpage"
          @current-change="getNewlist(currpage)"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      input_box: "", // 搜索内容
      currpage: 1, //当前页码
      pagesize: 10, //每页展示数目
      pagesizeCount: 0, //总条数
      proptype: "", //存放column.prop的字符串值
      oldExpandedRowsLength: 0, //已展开的数据行数量
      rowkey: 0
    };
  },
  mounted() {
    this.getList();
    //开启监听键盘按下事件
    window.addEventListener("keydown", this.handleKeyDown, true); 
  },
  methods: {
    //回车键查询
    handleKeyDown() {
      let key = null;
      if (window.event === undefined) {
        key = e.keyCode;
      } else {
        key = window.event.keyCode;
      }
      if (key === 13) {
        this.searchStuid();
      }
    },
    // 获取报修列表信息
    getList() {
      this.$axios
        .get("/api/manage/order/queryListByStatus/" + this.currpage + "/10/4")
        .then(res => {
          this.input_box = "";
          this.tableData = res.data.orders;
          this.pagesizeCount = res.data.dataCount;
          this.pagesCount = res.data.pagesCount;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    },
    //按学号搜索
    searchStuid() {
      if (this.input_box == "") {
        this.getList();
      } else {
        this.$axios
          .get("/api/manage/order/queryCompleteListByStuid/" + this.input_box)
          .then(res => {
            this.tableData = res.data.data.data.orderList;
          })
          .catch(err => {
            this.$alert("查询失败,请稍后重试!", {
              confirmButtonText: "确定",
              center: true
            });
          });
      }
    },
    //切换页数
    getNewlist(cpage) {
      this.currpage = cpage;
      this.getList();
    },
    //展开事件
    openExpand(row, expandedRows) {
      if (expandedRows.length > this.oldExpandedRowsLength) {
        this.oldExpandedRowsLength = expandedRows.length;
        this.$axios
          .get("/api/manage/order/queryFixerByOrderId/" + row.id)
          .then(res => {
            if (!row.fixerList) {
              let fixer = res.data.data;
              row.fixerHours = fixer.fixerHours;
              row.fixerList = fixer.fixerList.join(",");
              row.fixerNumber = fixer.fixerNumber;
              row.id++; //通过更新key刷新渲染组件
              row.id--;
            }
          });
      } else {
        this.oldExpandedRowsLength = 0;
      }
    },
    //列表日期格式
    dateFormat(row, column, cellValue) {
      var date = new Date(cellValue); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      return Y + M + D;
    },
    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },
    // 单元格样式
    tableClass() {
      return "text-align: center;";
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  .title {
    font-size: 30px;
    margin: 10px auto;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
  }
  .page {
    margin-top: 10px;
  }
  .clickBtn:hover {
    text-decoration: underline;
  }
  .okSpan {
    font-size: 12px;
    color: green;
  }
}
</style>